<template>
	<view class="first-before" @click="gotoIndex">
		<!-- 第一个按钮 -->
		<view class="right-btn">
			<view class="btn-img">
				<image src="../../static/icons/搜索.png"></image>
			</view>
			<view class="btn-sear">搜索</view>
		</view>
		<!-- 智商 -->
		<view class="zhishang">智商</view>
		<!-- 情商 -->
		<view class="qingshang" ref="qing">情商</view>
		<!-- 空白1 -->
		<view class="kongbai"></view>
		<!-- 空白2 -->
		<view class="kongbai2"></view>
		<view class="kongbai3"></view>
		<!-- 人际 -->
		<view class="renji" ref="renji">人际</view>
		<!-- 我 -->
		<view class="me">我</view>
		<view class="kangya" ref="kangya">抗压力</view>
		<view class="zhiye" ref="zhiye">职业</view>
		<view class="jianknag">健康</view>
		<view class="small-bai1"></view>
		<view class="small-bai2"></view>
		<!-- 最后一块 -->
		<view class="last-stone">
			<text>随便点点吧~</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad: function() {
			// console.log('App Show')
			// console.log(this.$store)
			//判断token
			let token = uni.getStorageSync('TOKEN')
			// console.log(token)
			if (token) {
				//存在则关闭启动页进入首页
				// plus.navigator.closeSplashscreen();
				console.log('token存在', token)
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1000)

			} else {
				// console.log('111')
				uni.reLaunch({
					url: '/pages/Login/Login',
				})
			}
		},
		methods: {
			gotoIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	@keyframes jump {
		0% {
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		100% {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
		}

	}

	.first-before {
		width: 750rpx;
		height: 100vh;
		background-color: #dc5a5a;
		position: relative;

		.right-btn {
			width: 140rpx;
			height: 70rpx;
			background-color: aliceblue;
			position: absolute;
			right: 30rpx;
			display: flex;
			border-radius: 15rpx;
			top: 60rpx;
			align-items: center;
			justify-content: space-between;

			.btn-img {
				width: 45rpx;
				height: 45rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.btn-sear {
				width: 100rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #585858;
			}

		}

		// 
		.zhishang,
		.qingshang,
		.renji,
		.kangya,
		.zhiye,
		.jianknag {

			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			color: #dc5a5a;
			background-color: #fff;
			font-size: 28rpx;
			font-weight: 550;
			position: absolute;
			text-align: center;
			line-height: 100rpx;
			top: 200rpx;
			left: 330rpx;
		}


		.qingshang {
			top: 300rpx;
			left: 130rpx;
			animation: jump 1s ease-out;
			animation-direction: alternate;
			animation-iteration-count: infinite;
			// animation-duration: 20s;

		}

		.renji {
			top: 380rpx;
			left: 560rpx;
			animation: jump 1s linear;
			animation-direction: alternate;
			animation-iteration-count: infinite;

		}

		.kangya {
			top: 670rpx;
			left: 80rpx;
			animation: jump 1s linear;
			animation-direction: alternate;
			animation-iteration-count: infinite;

		}

		.zhiye {
			top: 740rpx;
			left: 550rpx;
			animation: jump 1s linear;
			animation-direction: alternate;
			animation-iteration-count: infinite;


		}

		.jianknag {
			top: 900rpx;
			left: 250rpx;

		}

		.kongbai,
		.kongbai2,
		.kongbai3 {
			width: 50rpx;
			height: 50rpx;
			background-color: #fff;
			border-radius: 50%;
			position: absolute;
			top: 270rpx;
			right: 200rpx;
		}

		.kongbai2 {
			top: 470rpx;
			left: 50rpx;
		}

		.kongbai3 {
			top: 800rpx;
			left: 400rpx;
		}

		.me {
			width: 280rpx;
			height: 280rpx;
			font-size: 100rpx;
			background-color: #fff;
			color: #dc5a5a;
			line-height: 280rpx;
			text-align: center;
			position: absolute;
			top: 450rpx;
			left: 230rpx;
			border-radius: 50%;
		}

		.small-bai1,
		.small-bai2 {
			width: 30rpx;
			height: 30rpx;
			background-color: #fff;
			border-radius: 50%;
			position: absolute;
			left: 670rpx;
			top: 530rpx;
		}

		.small-bai2 {
			top: 950rpx;
			left: 520rpx;
		}

		.last-stone {
			width: 250rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 15rpx;
			color: white;
			font-size: 28rpx;
			background-color: #000000;
			opacity: 0.7;
			font-weight: 600;
			position: absolute;
			top: 1100rpx;
			left: 260rpx;
		}
	}
</style>
